<template>
	<view :data-theme="theme">
		<view class="money-top">
			<view style="display: flex;justify-content: end;">
				<image src="./bao.png"></image>
			</view>
			<view class="money-top-body">
				<view class="money-top-tab">
					<view class="money-top-tab-no" :class="amountType == 11?'on':''" @click="changeAmountType(11)">会员钱包<view class="after"></view></view>
					<view v-if="userInfo.isCardPromoter" class="money-top-tab-no"  :class="amountType == 41?'on':''" @click="changeAmountType(41)">开卡钱包<view class="after"></view></view>
					<view v-if="userInfo.grade>1 && !userInfo.isCardPromoter" class="money-top-tab-no"  :class="amountType == 21?'on':''" @click="changeAmountType(21)">水站钱包<view class="after"></view></view>
					<view v-if="userInfo.grade>1 || userInfo.isTeTong" class="money-top-tab-no"  :class="amountType == 31?'on':''" @click="changeAmountType(31)">代理钱包<view class="after"></view></view>
				</view>
				<view class="money-top-total">
					<view class="money-top-text1">累计收益（元）</view>
					<view class="money-top-text2">{{balancetotal || 0}}</view>
				</view>
				<view class="money-top-detail">
					<view class="money-top-total" v-if="amountType != 21">
						<view class="money-top-text1">待到账（元）</view>
						<view class="money-top-text3">{{balanceWait || 0}}</view>
					</view>
					<view class="money-top-total">
						<view class="money-top-text1">已提现（元）</view>
						<view class="money-top-text3">{{balanceHavdrawtotal || 0}}</view>
					</view>
					<view class="money-top-total">
						<view class="money-top-text1">待提现（元）</view>
						<view class="money-top-text3">{{balance || 0}}</view>
					</view>
				</view>
				<view class="money-top-detail" style="margin-top: 45rpx;">
					<view class="money-top-btn1" @click="show=true">查看名词解释</view>
					<view class="money-top-btn2" @click="goCash">去提现</view>
				</view>
			</view>
		</view>
		<view class="money-list">
			<view class="money-list-tab">
				<view :class="tabType == 'cumulative'?'on':''" @click="changeTabType('cumulative')">累计收益</view>
				<view v-if="amountType !== 21" :class="tabType == 'wait'?'on':''" @click="changeTabType('wait')">待到账</view>
				<view :class="tabType == 'ready'?'on':''" @click="changeTabType('ready')">已提现</view>
			</view>
			<view class="money-list-total" v-if="tabType == 'cumulative'">
				<view class="money-list-total-item">
					<view class="money-list-total-text1">今日收益（元）</view>
					<view class="money-list-total-text2">{{info.balanceMemberToday || 0}}</view>
				</view>
				<view class="money-list-total-item">
					<view class="money-list-total-text1">昨日收益（元）</view>
					<view class="money-list-total-text2">{{info.balanceMemberYestoday || 0}}</view>
				</view>
				<view class="money-list-total-item">
					<view class="money-list-total-text1">本月收益（元）</view>
					<view class="money-list-total-text2">{{info.balanceMemberThisMonth || 0}}</view>
				</view>
			</view>
			<view style="display: flex;margin-top: 20rpx;font-size: 26rpx;" v-if="tabType == 'cumulative'">
				<view>日期查询:</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">
						<view>{{date}}</view>
						<view class="iconfont icon-xiala2" style="font-size: 19rpx;"></view>
					</view>
				</picker>
			</view>
			
			<view class="money-list-body" style="display: flex;align-items: center;justify-content: space-between;">
				
				<view class="money-list-accumulate" v-if="tabType == 'cumulative' && amountType == 11">
					<image src="./money.png"></image>
					<view class="money-list-accumulate-text1">累计收益</view>
					<view class="money-list-accumulate-text2">已累计获得平台补贴{{(totalNum || 0) }}单</view>
				</view>
				<view class="money-list-accumulate" v-if="tabType == 'wait' && amountType == 11">
					<image src="./money.png"></image>
					<view class="money-list-accumulate-text1">待到账</view>
					<view class="money-list-accumulate-text2">您有{{(totalNum || 0)}}单正在排队中</view>
				</view>
				<view class="money-list-accumulate" v-if="tabType == 'ready'">
					<image src="./money.png"></image>
					<view class="money-list-accumulate-text1">已提现</view>
					<view class="money-list-accumulate-text2">您有{{info.withdrawWaitReachAmount  || 0}}等待打款中</view>
				</view>
				<view v-if="amountType == 11" class='checkAll' @click.stop="goTxet(20)">博士水票补贴规则</view>
			</view>
			<view style="margin-top: -40rpx;" v-if="tabType == 'wait' || tabType == 'cumulative'">
				<view class="item1" v-for="(item, key) in list" :index='key' :style="item.type==1?'margin-top:20rpx;padding-bottom:0;height:400rpx':''">
					<image class="item1-image2" src="./xin.png" v-if="item.type==1" mode="widthFix"></image>
					<view class="item1-body" :style="item.type==1?'padding-top:58rpx;':''" >
						<view style="position: relative;">
							<image class="item1-image" :src="item.image" v-if="item.image"></image>
							<image class="item1-image" src="./shui.jpg" v-else></image>
							<view class="status1" v-if="tabType == 'cumulative'">已到账</view>
							<view class="status2" v-if="tabType == 'wait' && amountType == 11">排队中</view>
							<view class="status2" v-else-if="tabType == 'wait'">订单未完结</view>
							<!-- <view class="status3">已提现</view> -->
						</view>
						
						<view style="flex: 1">
							<view class="item1-price">
								<text class="item1-price-name" v-if="item.image">{{item.productName}}</text>
								<text class="item1-price-name" v-else>{{item.reasonTitle}}</text>
								<text class="item1-price-num">¥{{item.addAmount}}</text>
							</view>
							<view class="item1-page">
								<view class="item1-text1">订单数量：</view>
								<view class="item1-text2" v-if="item.image">{{item.payNum || 1}}</view>
								<view class="item1-text2" v-else>{{item.ticketNum || 1}}张博士水票</view>
							</view>
							<view class="item1-page">
								<view class="item1-text1">订单编号：</view>
								<view class="item1-text2">{{item.tradeNo}}</view>
							</view>
							<view class="item1-page" v-if="item.image">
								<view class="item1-text1">下单时间：</view>
								<view class="item1-text2">{{item.createTime}}</view>
							</view>
							<view class="item1-page" v-else>
								<view class="item1-text1">核销时间：</view>
								<view class="item1-text2">{{item.writeoffTime}}</view>
							</view>
							<view class="item1-page" v-if="tabType == 'cumulative' && !item.image">
								<view class="item1-text1">到账时间：</view>
								<view class="item1-text2">{{item.createTime}}</view>
							</view>
							<view class="item1-page" v-if="tabType == 'cumulative' && item.image">
								<view class="item1-text1">到账时间：</view>
								<view class="item1-text2">{{item.updateTime}}</view>
							</view>
							<view class="item1-page" v-if="tabType == 'wait' && amountType == 11">
								<view class="item1-text1">前面还有：</view>
								<view class="item1-text2" v-if="item.type==1">{{item.frontNumNew}}单正在排队</view>
								<view class="item1-text2" v-else>{{item.frontNum}}单正在排队</view>
							</view>
					</view>
					
					</view>
					
				</view>
			</view>
			<view style="margin-top: -40rpx;" v-else>
				<view class="item2" v-for="(item, key) in list" :index='key'>
					<view class="item2-title">
						<view class="item2-title-name">
							<view class="status3" v-if="item.state == 0">待打款</view>
							<view class="status4" v-if="item.state == 1">已打款</view>
							<view class="status5" v-if="item.state == 2">已驳回</view>
							<view class="item2-title-name-text" v-if="item.type == 11">水学博士平台补贴</view>
							<view class="item2-title-name-text" v-if="item.type == 21">水站代理收益提现</view>
							<view class="item2-title-name-text" v-if="item.type == 31">各级代理收益提现</view>
						</view>
						<view class="item2-title-name-num">¥{{item.money}}</view>
					</view>
					<view class="item1-page">
						<view class="item1-text1">提现订单编号：</view>
						<view class="item1-text2">{{item.orderNo}}</view>
					</view>
					<view class="item1-page">
						<view class="item1-text1">提现申请时间：</view>
						<view class="item1-text2">{{item.createTime}}</view>
					</view>
					<view class="item1-page" v-if="item.state == 1">
						<view class="item1-text1">提现打款时间：</view>
						<view class="item1-text2">{{item.payTime}}</view>
					</view>
					<view class="item1-page" v-if="item.state == 2">
						<view class="item1-text1">提现失败反馈：</view>
						<view class="item1-text2">{{item.message}}</view>
					</view>
				</view>
			</view>
		</view>
		<neil-modal 
		    :show="show" 
		    title="名词解释" 
				confirm-text="我知道了"
				confirm-color="#E93323"
				:show-cancel="false"
		    >
				<view class="model-body" v-if="amountType == 11">
					<view class="model-item">
						<view class="model-text1">1.</view>
						<view class="model-text2">累计收益：即会员钱包累计到账的【平台补贴】收益总额，只会增加不会减少；</view>
					</view>
					<view class="model-item">
						<view class="model-text1">2.</view>
						<view class="model-text2">待到账：即还在等待排队中的【平台补贴】收益总额；</view>
					</view>
					<view class="model-item">
						<view class="model-text1">3.</view>
						<view class="model-text2">已提现：即已经申请提现的【平台补贴】，分为【待打款】【已打款】两种状态：</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【待打款】申请提交后未打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【已打款】申请提交后已打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1">4.</view>
						<view class="model-text2">可提现：即【已到账】且可提现的【平台补贴】余额</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">* 点击【去提现】位置，立即跳转到提现页面</view>
					</view>
				</view>
				<view class="model-body" v-if="amountType == 21">
					<view class="model-item">
						<view class="model-text1">1.</view>
						<view class="model-text2">【累计收益】：即【水站钱包】累计到账的【开卡收益】【卖水收益】【押金返还】收益总额，只会增加不会减少；</view>
					</view>
					<view class="model-item">
						<view class="model-text1">2.</view>
						<view class="model-text2">【已提现】：即已经申请提现的【开卡收益】【卖水收益】【押金返还】，分为【待打款】【已打款】两种状态：</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【待打款】申请提交后未打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【已打款】申请提交后已打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1">3.</view>
						<view class="model-text2">【可提现】：即【已到账】且可提现的【开卡收益】【卖水收益】【押金返还】余额</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">* 点击【去提现】位置，立即跳转到提现页面</view>
					</view>
				</view>
				<view class="model-body" v-if="amountType == 31">
					<view class="model-item">
						<view class="model-text1">1.</view>
						<view class="model-text2">【累计收益】：即【代理钱包】累计到账的【招商收益】【代理分红】【商城收益】收益总额，只会增加不会减少；</view>
					</view>
					<view class="model-item">
						<view class="model-text1">2.</view>
						<view class="model-text2">【待到账】：即还在等待订单完结中的【商城收益】收益总额；</view>
					</view>
					<view class="model-item">
						<view class="model-text1">3.</view>
						<view class="model-text2">【已提现】：即已经申请提现的【开卡收益】【卖水收益】【押金返还】，分为【待打款】【已打款】两种状态：</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【待打款】申请提交后未打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【已打款】申请提交后已打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1">4.</view>
						<view class="model-text2">【可提现】：即【已到账】且可提现的【招商收益】【代理分红】【商城收益】余额</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">* 点击【去提现】位置，立即跳转到提现页面</view>
					</view>
				</view>
				<view class="model-body" v-if="amountType == 41">
					<view class="model-item">
						<view class="model-text1">1.</view>
						<view class="model-text2">【累计收益】：即【开卡钱包】累计到账的【开卡收益】收益总额，只会增加不会减少；</view>
					</view>
					<view class="model-item">
						<view class="model-text1">2.</view>
						<view class="model-text2">【已提现】：即已经申请提现的【开卡收益】，分为【待打款】【已打款】两种状态：</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【待打款】申请提交后未打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">*【已打款】申请提交后已打款的状态</view>
					</view>
					<view class="model-item">
						<view class="model-text1">3.</view>
						<view class="model-text2">【可提现】：即【已到账】且可提现的【开卡收益】余额</view>
					</view>
					<view class="model-item">
						<view class="model-text1"></view>
						<view class="model-text2">* 点击【去提现】位置，立即跳转到提现页面</view>
					</view>
				</view>
		</neil-modal>
	</view>
</template>

<script>
	import {
		findInfo,
		findListIncome,
		findWithdrawWaitReachAmount,
		findListIncomeWaite,
		findList,
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	let app = getApp();
	export default {
		components: {
			neilModal
		},
		filters: {
			reasonTypeStr(val) {
				return {
					'0': '购买',
					'1': '赠送',
					'2': '受赠',
					'3': '扫码出水',
				}[val]
			}
		},
		data() {
			
			return {
				show: false,
				amountType: 11,
				tabType: 'cumulative',
				page: 1,
				limit: 20,
				loaded: false,
				loading: false,
				list: [],
				info: {},
				date: '请选择',
				totalNum: 0,
				
				theme:app.globalData.theme,
			};
		},
		computed: {
			...mapGetters(['isLogin','userInfo']),
			startDate() {
			    return this.getDate('start');
			},
			endDate() {
			    return this.getDate('end');
			},
			balancetotal() {
				const name = {
					11: 'balanceRvtotal',
					21: 'balanceStationRvtotal',
					31: 'balanceAgentRvtotal',
					41: 'balanceKaikaRvtotal',
				}[this.amountType]
				return this.info[name]
			},
			balanceWait() {
				const name = {
					11: 'balanceMemberWait',
					31: 'balanceAgentWait',
					41: 'balanceKaikaWait'
				}[this.amountType]
				return this.info[name]
			},
			balanceHavdrawtotal() {
				const name = {
					11: 'balanceMemberHavdrawtotal',
					21: 'balanceStationHavdrawtotal',
					31: 'balanceAgentHavdrawtotal',
					41: 'balanceKaikaHavdrawtotal',
				}[this.amountType]
				return this.info[name]
			},
			balance() {
				const name = {
					11: 'balanceMember',
					21: 'balanceStation',
					31: 'balanceAgent',
					41: 'balanceKaika',
				}[this.amountType]
				return this.info[name]
			},
		},
		onShow() {
			this.changeAmountType(this.amountType)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getList();
		},
		methods: {
			bindDateChange: function(e) {
					this.date = e.detail.value
					this.page = 1
					this.list = []
					this.loaded = false
					this.loading = false
					this.getList();
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();

					if (type === 'start') {
							year = year - 1;
					} else if (type === 'end') {
							year = year + 1;
					}
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			},
			goTxet(id) {
				uni.navigateTo({
					url: '/pages/news/news_details/index?id='+id
				})
			},
			goCash() {
				uni.navigateTo({
					url:`/pages/users/user_money_new/cash?type=${this.amountType}`
				})
			},
			changeAmountType(amountType) {
				this.amountType = amountType
				this.tabType = 'cumulative'
				this.page = 1
				this.list = []
				this.loaded = false
				this.date = '请选择'
				this.loading = false
				findInfo({amountType}).then(res => {
					this.info = res.data || {}
				})
				this.getList();
			},
			changeTabType(type) {
				this.tabType = type
				this.page = 1
				this.list = []
				this.loaded = false
				this.loading = false
				this.date = '请选择'
				this.getList();
				if (this.tabType == 'ready'){
					findWithdrawWaitReachAmount({amountType: this.amountType}).then(res => {
						this.info.withdrawWaitReachAmount = res.data
					})
				}
			},
			search(e) {
				this.keywords = e.detail.value
				this.changeProxy(this.proxy, this.proxyIndex)
			},
			async getList() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				let data = {
					amountType: this.amountType,
					page: this.page,
					limit: this.limit
				};
				if (this.date !='请选择') {
					data.day = this.date.replace(/-/g, "");//取消字符串中出现的所有逗号
				}
				let res = ''
				if (this.tabType == 'cumulative') {
					if (this.amountType == 31 || this.amountType == 41) {
						data.status = 1
					}
					res = await findListIncome(data)
				}
				if (this.tabType == 'wait') {
					if (this.amountType == 11) {
						res = await findListIncomeWaite(data)
					} else {
						res = await findListIncome({
							...data,
							status: 0,
						})
					}
				}
				if (this.tabType == 'ready') {
					res = await findList(data)
				}
				this.loading = false;
				this.list.push.apply(this.list, res.data.list);
				this.totalNum = res.data.total
				// let checkList = []
				// this.list.forEach(item => {
				// 	if (item.writeoffTime.indexOf('2025-09-02')>-1 && item.reasonTitle.indexOf('水站代理-押金返还')>-1) {
				// 		checkList.push(item)
				// 	}
				// })
				// let addAmount = []
				// let totalAmount =0
				// checkList.forEach(item => {
				// 	addAmount.push(`${item.reasonTitle}:${item.addAmount}`)
				// 	totalAmount += (item.addAmount * 1)
				// })
				// console.log(addAmount,totalAmount)
				this.page = this.page + 1;
				this.loaded = !res.data.hasNextPage
			},
		}
	}
</script>

<style scoped lang='scss'>
	.checkAll{
		font-size: 20rpx;
		color: #3A84F0;
	}
	.model-item{
		display: flex;
		margin-bottom: 20rpx;
	}
	.model-text1{
		width: 30rpx;
		font-size: 28rpx;
		color: #555555;
		line-height: 45rpx;
		flex-shrink: 0;
	}
	.model-text2{
		flex: 1;
		font-size: 28rpx;
		color: #555555;
		line-height: 45rpx;
	}
	.model-body{
		padding: 60rpx 30rpx;
	}
	.status2{
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 9;
		background: #F09D3A;
		border-radius: 2rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 3rpx 5rpx;
	}
	.status1{
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 9;
		background: #45DA7C;
		border-radius: 2rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 3rpx 5rpx;
	}
	.item1-page{
		margin-top: 20rpx;
		display: flex;
		.item1-text1{
			flex-shrink: 0;
			font-size: 26rpx;
			color: #333;
		}
		.item1-text2{
			font-size: 26rpx;
			color: #666;
			max-width: 300rpx;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.item1-price{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 26rpx;
		.item1-price-name{
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 250rpx;
		}
		.item1-price-num{
			font-size: 28rpx;
			color: #EA3F30;
		}
	}
	.item1 {
		padding: 40rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	.item1-body {
		display: flex;
		position: relative;
		align-items: center;
		padding: 0 20rpx;
		z-index: 2;
	}
	.item1-image2 {
		width: 100%;
		position: absolute;
		left: 0%;
		top: 0%;
		z-index: 1;
	}
	.item1-image{
		width: 208rpx;
		height: 274rpx;
		border-radius: 20rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	.item2{
		display: flex;
		flex-direction: column;
		padding: 40rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	.item2-title{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6rpx;
		.item2-title-name{
			display: flex;
			align-items: center;
			.status3{
				background: #F09D3A;
				border-radius: 2rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 3rpx 5rpx;
			}
			.status4{
				background: #3A84F0;
				border-radius: 2rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 3rpx 5rpx;
			}
			.status5{
				background: #B2B2B2;
				border-radius: 2rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 3rpx 5rpx;
			}
			&-text{
				font-size: 28rpx;
				font-weight: bold;
				padding-left: 20rpx;
				color: #333333;
			}
		}
		.item2-title-name-num{
			font-size: 28rpx;
			color: #F09D3A;
		}
	}
	.money-list-accumulate{
		display: flex;
		align-items: center;
		image{
			width: 30rpx;
			height: 30rpx;
		}
		.money-list-accumulate-text1{
			padding-right: 8rpx;
			height: 30rpx;
			background: #EA3F30;
			padding-left: 26rpx;
			font-size: 20rpx;
			margin-left: -20rpx;
			border-radius: 30rpx;
			color: #FFFFFF;
		}
		.money-list-accumulate-text2{
			font-size: 20rpx;
			color: #EA3F30;
			padding-left: 10rpx;
		}
	}
	.money-list-body{
		padding: 40rpx 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.money-list-total-text1{
		font-size: 24rpx;
		color: #999999;
	}
	.money-list-total-text2{
		font-size: 34rpx;
		color: #333333;
		margin-top: 15rpx;
	}
	.money-list-total-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.money-list-total {
		padding: 0 18rpx;
		height: 180rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		border-radius: 20rpx;
	}
	.money-list-tab{
		height: 138rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view{
			font-size: 28rpx;
			color: #666666;
		}
		.on{
			font-size: 34rpx;
			color: #333333;
		}
	}
	.money-list{
		padding: 0 30rpx;
	}
	.money-top-btn2{
		width: 322rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 47rpx;
		font-size: 24rpx;
		color: #E93323;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.money-top-btn1{
		width: 322rpx;
		height: 80rpx;
		border-radius: 47rpx;
		border: 2rpx solid #FFFFFF;
		opacity: 0.8;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.money-top-detail{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 30rpx;
	}
	.money-top-text3{
		margin-top: 10rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}
	.money-top-text2{
		margin-top: 24rpx;
		font-size: 50rpx;
		color: #FFFFFF;
	}
	.money-top-text1{
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.money-top-total{
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.money-top-tab{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40rpx;
		
		.money-top-tab-no{
			width: 170rpx;
			height: 60rpx;
			position: relative;
			text-align: center;
			z-index: 99;
			font-size: 30rpx;
			color: #FFFFFF !important;
		}
		.on{
			.after{
				position: absolute;
				content: '';
				bottom: 0;
				left: 50%;
				transform: translate(-50%,0);
				width: 40rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
			}
		}
	}
	.money-top-body{
		position: absolute;
		z-index: 1;
		top: 0%;
		right: 0%;
		left: 0%;
		bottom: 0%;
		
	}
	.money-top{
		width: 100vw;
		height: 640rpx;
		background: linear-gradient( 180deg, #F36C3D 0%, #FF0606 100%);
		position: relative;
		image{
			width: 283rpx;
			height: 289rpx;
			display: block;
		}
	}
	.uni-input{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		padding-left: 20rpx;
		color: #666666;
	}
</style>
